<script setup lang="ts">
import { ref, reactive, PropType } from 'vue'
import globalConfig from '@/config'

const { activeTab, tabList } = defineProps({
	activeTab: {
		type: String,
	},
	tabList: {
		type: Array as PropType<typeof globalConfig.branch>,
		required: true,
	},
})

const emits = defineEmits(['switch'])

const activeTabLabel = ref<string>(activeTab ?? tabList[0].label)
const handleTagSwitch = (activeTab: ChampionBranch) => {
	if (activeTab.label == activeTabLabel.value) return
	activeTabLabel.value = activeTab.label
	emits('switch', activeTab)
}
</script>
<template>
	<view class="tabs-bar flex">
		<div
			v-for="tab in tabList"
			:key="tab.key"
			class="tab flex-grow px-1 py-2 cursor-pointer transition-all"
			:class="
				activeTabLabel == tab.label
					? 'text-white bg-blue hover-none'
					: ''
			"
			@click="handleTagSwitch(tab)"
		>
			<slot name="label">{{ tab.label }}</slot>
		</div>
	</view>
</template>

<style lang="scss" scoped>
@import './style.scss';
</style>
